<template>
  <div class="main-block-4">
    <div class="title">危险人物动向</div>
    <div class="danger-wrapper">
      <danger v-for="(item, index) in dangers" :data="item" :index="index"></danger>
    </div>
  </div>
</template>

<script>
import Danger from './Danger'
import Vue from 'vue'
import {randint, contain} from 'utils/random'
import {sleep} from 'utils/timer'

var data = {}
data.dangers = [
  {name: 'arles1', country: '美国', timestamp: 1, active: false},
  {name: 'arles2', country: '美国', timestamp: 2, active: true},
  {name: 'arles3', country: '美国', timestamp: 3, active: false},
  {name: 'arles4', country: '美国', timestamp: 4, active: false}
]

function getNewdata(){
  return {
    name: 'arles' + i,
    country: '美国',
    timestamp: +new Date(),
    active: randint(4) ? false : true
  }
}

var i = 4
setInterval(async function(){
  i++
  Vue.set(data.dangers, 0, getNewdata())
  await sleep(200)
  i++
  Vue.set(data.dangers, 1, getNewdata())
  await sleep(200)
  i++
  Vue.set(data.dangers, 2, getNewdata())
  await sleep(200)
  i++
  Vue.set(data.dangers, 3, getNewdata())
  await sleep(200)
}, 4000)

export default {
  name: 'block4',
  components: {Danger},
  data(){
    return data;
  }
}
</script>

<style scoped>
.main-block-4{
  position: absolute;
  background-image: url(./img/main-block-4.png);
  background-size: 100% 100%;
  right: 4.07vh;
  top: 33.89vh;
  width: 53.15vh;
  height: 26.02vh;
  filter: drop-shadow(0 0 7px #0057b8);
}
.title{
  position: absolute;
  color: #b8fdff;
  font-size: 2.4vh;
  left: 4.6vh;
  top: 2.1vh;
}
.danger-wrapper{
  position: absolute;
  left: 3.52vh;
  top: 7.22vh;
}
.cp-danger{
  float: left;
  margin-right: 0.65vh;
}
</style>
